<template>
  <div id="app">
    <!-- <bbt/> -->
    <!-- <shangpin/> -->
    <!-- <foot/> -->
   <!-- <keep-alive>
    <component :is="coms[currentIndex]"> </component>
  </keep-alive> -->
  <transition name="v">
    <router-view></router-view>
  </transition>

  <div class="tabbar">
    <!-- <span  @click="(currentIndex=index)" v-for="(item,index) in btns" :key="index" :class="{active:currentIndex==index}">{{item}}</span> -->
     <router-link to="/shangpin">首页</router-link>
     <router-link to="/bbt">爆爆团</router-link>
     <router-link to="/dingdan">订单</router-link>
     <router-link to="/my">我的</router-link>
    </div>
    
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      currentIndex:0,
    }
  },
  
  methods:{
       btn(index){
        console.log(index);
        this.btnsIndex=index
       }
      },
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
  }
  .tabbar{
    position:fixed;
    bottom: 0%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: white;
    font-size: 14px;
  }
  .active{
    color: lightcoral;
  }
  a{
    color: black;
    text-decoration: none;
  }
  a.router-link-active{
    color: red;
  }
  .v-enter{
    opacity: 0;
  }
  .v-enter-active{
  transition: all 1s;
  }
  .v-leave{
    opacity: 1;
  }
</style>
